import { Result, Button, Tooltip, Typography } from 'antd';
import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-types
export default class ErrorBoundary extends React.Component {
  state = { hasError: false, errorInfo: '' };
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, errorInfo: error.message };
  }

  componentDidCatch(error: any, errorInfo: any) {
    // You can also log the error to an error reporting service
    // eslint-disable-next-line no-console
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <Result
          status="500"
          title={<b style={{ fontSize: 14 }}>抱歉，服务发生错误！请刷新页面</b>}
          subTitle={
            <Tooltip title={this.state.errorInfo}>
              <Typography.Paragraph
                copyable={{
                  text: this.state.errorInfo,
                }}
              >
                错误信息
              </Typography.Paragraph>
            </Tooltip>
          }
          extra={
            <Button
              type="primary"
              onClick={() => {
                window.location.reload();
              }}
            >
              刷新页面
            </Button>
          }
        />
      );
    }
    return this.props.children;
  }
}
